tg-me.com/ProgrammerwayIT/540
Last Update:
Mustache.js.
Решил немного переделать попапы у себя на сайте, раньше они создавались отдельно для каждого элемента работ и затем, при загрузке новых блоков, их приходилось создавать уже для новых элементов. А еще повторно навешивать обработчик события на них, так как когда скрипт проходился по массиву элементов, то там было одно количество, а после загрузки на странице появились еще элементы, но скрипт уже отработал и не знает, что надо открыть попап по клике на подгрузившийся блок
Убрал обработчик с блоков и поставил его на body, чтобы потом просто отлавливать клик по элементу и по кнопке закрытия попапа сразу. Попапы для каждого блока тоже убрал. Теперь каждый раз по клике на блок работы создается новый попап, куда подставляются значения из объекта, который я создал для каждого блока и поместил в data атрибут, это позволило неплохо оптимизировать сайт и теперь вместо 20 блоков всего лишь 1
Блок попапа я поместил в тег template, он не рендерится в DOM дереве и служит для взаимодействия с js, это нужно было для того, чтобы для разных языков были разные попапы. Я, конечно, мог поместить верстку попапа в js, но тогда менять текст кнопок для каждого языка было бы затруднительно, а подключать react по мелочи тоже не хотелось. Поэтому решил для более удобного взаимодействия с template использовать библиотеку Mustache.js, она позволяет легко вставлять данные в свой шаблон и удобно работать с объектами. Эта библиотека отлично подходит для того, чтобы быстро получить готовый html, основанный на каких либо данных, тоже самое можно было бы сделать и через нативный js, через тот же insertAdjacentHTML, но мне было быстрее и удобнее использовать мustache, кому интересно почитать про библиотеку, оставлю статью ниже
BY Programmer Way | IT и фриланс
Share with your friend now:
tg-me.com/ProgrammerwayIT/540